import react, { Fragment } from "react";
import './TodoList.css'
import Test from './test'
import InputTest from './InputTest'

class TodoList extends react.Component {
    constructor(props) {//创建TodoList组件时，调用父组件的构造函数
        super(props);
        this.state = {
            inpVal:'hello',
            dataList: ['happy', 'sad', 'surprise']
        }
    }
    componentWillReceiveProps(){
        console.log("componentWillReceiveProps ")
    }
    render() {
        return (
            <Fragment>
                <div className="root">
                    <InputTest
                    handleInpChange={this.handleInpChange.bind(this)}
                    handleSubmit={this.handleSubmit.bind(this)}
                    inpVal={this.state.inpVal}
                    >
                    </InputTest>
                    <ul>
                        {/* <li>happy</li>
                        <li>sad</li>
                        <li>surprise</li> */}
                        {
                            this.state.dataList.map((item, idx) => {
                                return (
                                    <Test
                                    content={item}
                                    list={this.state.dataList}
                                    index={idx}
                                    handelDel={this.handleRemove.bind(this)}
                                    ></Test>
                                    //dangerouslySetInnerHTML要注意安全性，防止脚本注入
                                    //子组件不能修改父组件传进来的值
                                )
                            })
                        }
                    </ul>
                </div>
            </Fragment>
        );
    }
    //改变文本框值
    handleInpChange(e) {
        this.setState(()=>{
            return{
                inpVal: e.target.value
            }
        })
    }
    //提交
    handleSubmit() {
        if (this.state.inpVal.trim()) {
            this.setState((prevState)=>{
                return{
                    dataList: [...prevState.dataList,prevState.inpVal],
                    inpVal:''
                }
            })
        }
    }
    //删除
    handleRemove(idx){
        this.setState((prevState)=>{
            var newList=[...prevState.dataList]
            newList.splice(idx,1)
            return{
                dataList:newList
            }
        },()=>{
            console.log("setState的回调函数")
        })
    }
}
// function TodoList() {
//     return (
//         <div className="App">
//             <ul>
//                 <li>happy</li>
//                 <li>sad</li>
//                 <li>surprise</li>
//             </ul>
//         </div>
//     );
// }
export default TodoList;

//props验证



//当组件即将挂载到页面的时候   componentWillMount
//当组件被挂载后              componentDidMount
//当组件将被销毁时            componentWillUnmount
//是否需要更新                shouldComponentUpdate
//当组件将要更新时            componentWillUpdate
//当组件更新后                componentDidUpdate 
//如果一个组件第一次存在父组件中，不会被执行，如果之前就存在父组件，才会被执行   componentWillReceiveProps 